(function(){
    let bannerNavUl = document.getElementById("banner-nav-ul");
    let bannerNav = document.getElementById("banner-nav");
    let bannerList = document.querySelectorAll(".banner-nav-ul li");

    //寻找所有的menu
    let menu = document.querySelectorAll(".menus-box .menu");
    //事件委托
    bannerNavUl.onmouseover = function(e){
        //得到触碰的这个li元素身上的data-t属性
        if(e.target.tagName.toLowerCase() == "li"){
            let t = e.target.getAttribute("data-t");
            //排他操作，让所有li去掉current类名
            for (let i = 0; i < bannerList.length; i++) {
                bannerList[i].className = bannerList[i].getAttribute("data-t");
            }
            // //当前碰到的元素，要加current类名
            e.target.className += " current";
            

            //寻找匹配的menu
            let themenu = document.querySelector(`.menus-box .menu[data-t=${t}]`);
            //排他操作，让所有menu盒子去掉current类名
            for (let i = 0; i < menu.length; i++) {
                menu[i].className = "menu";  
            }
            themenu.className = "menu current";
        }
    }

    //当鼠标离开大盒子的时候，菜单要关闭
    bannerNav.onmouseleave = function(){
        for (let i = 0; i < bannerList.length; i++) {
            bannerList[i].className = bannerList[i].getAttribute("data-t");
            menu[i].className = "menu";
        }
    }
})();